<template>
  <view class="props-container">
    <u-navbar title="道具商城" :autoBack="true" :fixed="false">
      <view class="record-list" slot="right">
        <text>道具记录</text>
      </view>
    </u-navbar>

    <view class="list">
      <template v-for="(item, index) in propsList">
        <view class="item">
          <view class="left">
            <image class="img" :src="item.img" mode="scaleToFill" />
            <view class="bottom">
              <view class="title"> {{ item.title }}</view>
              <view class="content"> {{ item.content }}</view>
            </view>
          </view>
          <view class="right">
            <view class="btn">
              <view class="text">去购买</view>
              <u-icon size="12" color="#fff" name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      // 道具列表
      propsList: [
        {
          title: "刷新卡",
          content: "可将帖子刷新至首位",
          img: "../../static/my-img/refresh.png",
        },
        {
          title: "查看卡",
          content: "可查看帖子联系方式",
          img: "../../static/my-img/examine.png",
        },
        {
          title: "置顶卡",
          content: "可将帖子置顶显示",
          img: "../../static/my-img/top.png",
        },
        {
          title: "图链特权卡",
          content: "发帖可添加连接和图片",
          img: "../../static/my-img/img.png",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.props-container {
  min-height: 100vh;
  background-color: #fff;
}
.list {
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 710rpx;
    border: 5rpx solid #cbcbcb;
    border-radius: 20rpx;
    padding: 50rpx 20rpx;
    box-sizing: border-box;
    margin: 20rpx auto;
    .left {
      display: flex;
      align-items: center;
      .img {
        width: 60rpx;
        height: 60rpx;
        margin-right: 10rpx;
      }
      .bottom {
        .title {
          font-size: 28rpx;
        }
        .content {
          font-size: 25rpx;
        }
      }
    }
    .right {
      .btn {
        display: flex;
        align-items: center;
        background-color: #3996fd;
        padding: 8rpx 20rpx;
        box-sizing: border-box;
        border-radius: 30rpx;

        .text {
          font-size: 24rpx;
          color: #fff;
        }
      }
    }
  }
}
</style>
